<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 拖动（Draggable)</title>
    <script src="./js/libs/jquery.min.js"></script>
    <script src="./js/libs/jQuery-ui/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/libs/jquery-ui.css" />
  <style>
      #nw { width: 5px; height:5px; position: absolute;left: 0!important;top: 0!important;background: red;cursor: nw-resize}
      #ne { width: 5px; height:5px; position: absolute;left: calc(100% - 5px)!important;top: 0!important;background: red;cursor: ne-resize}
      #se { width: 5px; height:5px; position: absolute;left: calc(100% - 5px)!important;top: calc(100% - 5px)!important;background: red;cursor: se-resize}
      #sw { width: 5px; height:5px; position: absolute;left:0!important;top: calc(100% - 5px)!important;background: red;cursor: sw-resize}
      #n { width: 5px; height:5px; position: absolute;left: calc(50% - 2.5px)!important;top: 0!important;background: red;cursor: s-resize}
      #e { width: 5px; height:5px; position: absolute;left: calc(100% - 5px)!important;top: calc(50% - 2.5px)!important;background: red;cursor: w-resize}
      #s { width: 5px; height:5px; position: absolute;left: calc(50% - 2.5px)!important;top: calc(100% - 5px)!important;background: red;cursor: s-resize}
      #w { width: 5px; height:5px; position: absolute;left: 0!important;top: calc(50% - 2.5px)!important;background: red;cursor: w-resize}

	  #box { width:100%; height:100%;background: black;position: absolute;}
      #crop-box {width:300px; height:300px;position: absolute;top:100px; left: 100px;}
  </style>
  <script>
  $(function() {
	  var x1,y1,x2,y2;
      var top,left;
      var width = $("#box").width();
      var height = $("#box").height();

      function  init(id,type){
           $("#"+id).draggable({
               axis:type || false,
               start: function(a) {
                   x1 = a.pageX;
                   y1 = a.pageY;
                   top = $("#crop-box").position().top;
                   left = $("#crop-box").position().left;
               },
               drag: function(a) {
                   x2 = x1-a.pageX;
                   y2 = y1-a.pageY;
                   if(id == "nw" || id == "sw" || id == "w"){
                       $("#crop-box").width(width+x2);
                   }
                   if(id == "ne" || id == "se" || id == "e"){
                       $("#crop-box").width(width-x2);
                   }
                   if(id == "sw" || id == "se" || id == "s"){
                       $("#crop-box").height(height-y2);
                   }
                   if(id == "nw" || id == "ne" || id == "n"){
                       $("#crop-box").height(height+y2);
                   }

                   if(id == "nw" || id == "ne" || id == "n"){
                       $("#crop-box").css("top",top -y2);
                   }
                   if(id == "nw" || id == "sw" || id == "w"){
                       $("#crop-box").css("left",left -x2);
                   }
               },
               stop: function() {
                   width =  $("#crop-box").width()
                   height =  $("#crop-box").height()
               }
           })
      }

      init("nw");
      init("ne");
      init("se");
      init("sw");
      init("n");
      init("e");
      init("s");
      init("w");


//      $( "#nw" ).draggable({
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              top = $("#crop-box").position().top;
//              left = $("#crop-box").position().left;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").width(w+x2);
//              $("#crop-box").height(h+y2);
//              $("#crop-box").css("top",top -y2);
//              $("#crop-box").css("left",left -x2);
//
//          },
//          stop: function(e) {
//              w =  $("#crop-box").width()
//              h =  $("#crop-box").height()
//          }
//      });
//
//
//
//      $( "#ne" ).draggable({
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              top = $("#crop-box").position().top;
//              left = $("#crop-box").position().left;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").width(w-x2);
//              $("#crop-box").height(h+y2);
//              $("#crop-box").css("top",top -y2);
//
//          },
//          stop: function(e) {
//              w =  $("#crop-box").width()
//              h =  $("#crop-box").height()
//          }
//      });
//
//      $( "#se" ).draggable({
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              top = $("#crop-box").position().top;
//              left = $("#crop-box").position().left;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").width(w-x2);
//              $("#crop-box").height(h-y2);
//
//          },
//          stop: function(e) {
//              w =  $("#crop-box").width()
//              h =  $("#crop-box").height()
//          }
//      });
//
//
//      $( "#sw" ).draggable({
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              top = $("#crop-box").position().top;
//              left = $("#crop-box").position().left;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").width(w+x2);
//              $("#crop-box").height(h-y2);
//              $("#crop-box").css("left",left -x2);
//
//          },
//          stop: function(e) {
//              w =  $("#crop-box").width()
//              h =  $("#crop-box").height()
//          }
//      });
//
//      $( "#n" ).draggable({
//          axis: "y",
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              top = $("#crop-box").position().top;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").height(h+y2);
//              $("#crop-box").css("top",top -y2);
//
//
//          },
//          stop: function(e) {
//              h =  $("#crop-box").height()
//          }
//      });
//
//      $( "#e" ).draggable({
//          axis: "x",
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              left = $("#crop-box").position().left;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").width(w-x2);
//
//
//          },
//          stop: function(e) {
//              w =  $("#crop-box").width()
//          }
//      });
//
//      $( "#s" ).draggable({
//          axis: "y",
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              top = $("#crop-box").position().top;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").height(h-y2);
//
//
//          },
//          stop: function(e) {
//              h =  $("#crop-box").height()
//          }
//      });
//
//      $( "#w" ).draggable({
//          axis: "x",
//          start: function(e) {
//              x1 = e.pageX;
//              y1 = e.pageY;
//              left = $("#crop-box").position().left;
//          },
//          drag: function(e) {
//              x2 = x1-e.pageX;
//              y2 = y1-e.pageY;
//              console.log("x",x2)
//              console.log("y",y2)
//              $("#crop-box").width(w+x2);
//              $("#crop-box").css("left",left -x2);
//
//
//          },
//          stop: function(e) {
//              w =  $("#crop-box").width()
//          }
//      });

  });
  </script>
</head>
<body>
<div id="crop-box">
<div id="box"></div>


        <div id="nw"></div>
        <div id="ne"></div>
        <div id="se"></div>
        <div id="sw"></div>
        <div id="n"></div>
        <div id="e"></div>
        <div id="s"></div>
        <div id="w"></div>

</div>



</body>
</html>